<template>
  <!-- 评价 -->
  <div class="Evaluate">
    <div class="body">
      <div class="g-con">
        <div class="main">
          <div class="title">{{ t('userCenter.t16') }}</div>

          <el-tabs
            v-model="activeName"
            type="card"
            class="mt-2"
            @tab-change="tabChange"
          >
            <el-tab-pane
              :label="item.label"
              :name="item.name"
              :key="item.name"
              v-for="item in tabsData"
            >
            </el-tab-pane>
          </el-tabs>

          <!-- <div class="search flexsc">
            <div class="item">
              <el-input
                v-model="searchData.orderNo"
                placeholder="坞修单编号"
              />
            </div>
            <el-button
              type="primary"
              @click="handleSearch"
            >
              查询
            </el-button>
            <el-button
              type="primary"
              color="#252628"
              @click="handleReset"
            >
              重置
            </el-button>
          </div> -->

          <!-- 坞修服务评价 -->
          <div
            class="g-order-list"
            v-if="activeName === '1'"
          >
            <div
              class="li mt-2"
              v-for="item in listData"
              :key="item.id"
            >
              <div class="attr">
                <div class="item">
                  <span>{{ t('DockOrderOnlineQuotation.t2') }}:</span>
                  <span>{{ item.quotationNo }}</span>
                </div>
                <div class="item">
                  <span>{{ t('DockOrderOnlineQuotation.t28') }}:</span>
                  <span>{{ item.dockOrderName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr1') }}:</span>
                  <span>{{ item.enterpriseName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr2') }}:</span>
                  <span>{{ item.quotaAmountTotal }} {{ getDictLabel('currency', item.quoteOrderCurrency) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr3') }}:</span>
                  <span>{{ dateFormat(item.submitTime) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr5') }}:</span>
                  <span>{{ item.totalRepairPeriod }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr6') }}:</span>
                  <span>{{ dateFormat(item.quotationEndTime) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr4') }}:</span>
                  <span>{{ dateFormat(item.updateTime) }}</span>
                </div>
              </div>

              <div class="bottom flexsb mt-3">
                <div class="">
                  <el-button
                    v-if="item.canEvaluation"
                    type="primary"
                    @click="handleEvaluate(item)"
                  >
                    {{ t('userCenter.t16') }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 采购服务评价 -->
          <div
            class="g-order-list"
            v-if="activeName === '2'"
          >
            <div
              class="li mt-2"
              v-for="item in listData"
              :key="item.id"
            >
              <div class="attr">
                <div class="item">
                  <span>{{ t('procurement.orderNumber') }}:</span>
                  <span>{{ item.orderNo }}</span>
                </div>
                <div class="item">
                  <span>{{ t('invitationQuotation.attr2_2') }}:</span>
                  <span>{{ item.procureOrderName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr1') }}:</span>
                  <span>{{ item.enterpriseName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr2') }}:</span>
                  <span>{{ item.quotaAmountTotal }} {{ getDictLabel('currency', item.quoteOrderCurrency) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr3') }}:</span>
                  <span>{{ dateFormat(item.submitTime) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr6') }}:</span>
                  <span>{{ dateFormat(item.quotationEndTime) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr4') }}:</span>
                  <span>{{ dateFormat(item.updateTime) }}</span>
                </div>
              </div>

              <div class="bottom flexsb mt-3">
                <div class="">
                  <el-button
                    v-if="item.canEvaluation"
                    type="primary"
                    @click="handleEvaluate(item)"
                  >
                    {{ t('userCenter.t16') }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 外协服务评价 -->
          <div
            class="g-order-list"
            v-if="activeName === '3'"
          >
            <div
              class="li mt-2"
              v-for="item in listData"
              :key="item.id"
            >
              <div class="attr">
                <div class="item">
                  <span>{{ t('externalAssistance.orderNumber') }}:</span>
                  <span>{{ item.orderNo }}</span>
                </div>
                <div class="item">
                  <span>{{ t('invitationQuotation.attr2_3') }}:</span>
                  <span>{{ item.assistOrderName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr1') }}:</span>
                  <span>{{ item.enterpriseName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr2') }}:</span>
                  <span>{{ item.quotaAmountTotal }} {{ getDictLabel('currency', item.quoteOrderCurrency) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr3') }}:</span>
                  <span>{{ dateFormat(item.submitTime) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr6') }}:</span>
                  <span>{{ dateFormat(item.quotationEndTime) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('priceSheet.attr4') }}:</span>
                  <span>{{ dateFormat(item.updateTime) }}</span>
                </div>
              </div>

              <div class="bottom flexsb mt-3">
                <div class="">
                  <el-button
                    v-if="item.canEvaluation"
                    type="primary"
                    @click="handleEvaluate(item)"
                  >
                    {{ t('userCenter.t16') }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <div class="flexcc mt-3">
            <el-pagination
              layout="prev, pager, next"
              :hide-on-single-page="total <= page.pageSize"
              :total="total"
              v-model:current-page="page.pageNum"
              :page-size="page.pageSize"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 评价 -->
    <EvaluateDialog
      v-if="evaluateDialog"
      :quotaionOrderId="editRow.id"
      :orderId="editRow.orderId"
      :ratedEnterpriseId="editRow.ratedEnterpriseId"
      :type="activeName"
      :visible="evaluateDialog"
      @close="evaluateDialog = false"
      @getList="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch, nextTick, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
import { dateFormat } from '@/utils/index'
import useLogin from '@/stores/login'
import { queryAwaitingEvaluationApi as getListApi1 } from '@/service/dockOrder'
import { queryAwaitingEvaluationApi as getListApi2 } from '@/service/procurement'
import { queryAwaitingEvaluationApi as getListApi3 } from '@/service/externalAssistance'
import useDict from '@/hooks/useDict'

import EvaluateDialog from './EvaluateDialog.vue'

const { dictData, getDictData, getDictLabel } = useDict()

const router = useRouter()
const route = useRoute()

const store = useLogin()

watch(locale, () => {
  init()
})

onBeforeMount(() => {
  init()
})

// tab
const tabsData = ref([])
const setTabsData = () => {
  const arr = [
    {
      label: t('userCenter.el1'),
      name: '1',
      role: ['05', '06'] // 船东/船管
    },
    {
      label: t('userCenter.el2'),
      name: '2',
      role: ['05', '06', '07'] // 船东/船管/修船厂
    },
    {
      label: t('userCenter.el3'),
      name: '3',
      role: ['05', '06', '07'] // 船东/船管/修船厂
    }
  ]

  tabsData.value = arr.filter((item) => item.role.includes(store.userInfo.customerClassCode))
  activeName.value = tabsData.value[0].name
}
const activeName = ref('')
const tabChange = (name) => {
  page.value.pageNum = 1
  searchData.value = {}
  listData.value = []
  getList()
}

// 查询
const searchData = ref({})
const shipOptions = ref([])
const handleSearch = () => {
  page.value.pageNum = 1
  if (searchData.value.shipId) {
    searchData.value.shipList = [searchData.value.shipId]
  }
  getList()
}
const handleReset = () => {
  page.value.pageNum = 1
  searchData.value = {}
  getList()
}

// 坞修单列表
const listData = ref([])
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 6 // 每页条数
})
const total = ref(0) // 总数
const getList = () => {
  const obj = {
    1: getListApi1,
    2: getListApi2,
    3: getListApi3
  }
  const apiFun = obj[activeName.value]
  apiFun(page.value, searchData.value).then(({ data, total: t }) => {
    listData.value = data
    total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

// 正在操作的行
const editRow = ref(null)

// 评价
const evaluateDialog = ref(false)
const handleEvaluate = (item) => {
  editRow.value = item
  evaluateDialog.value = true
}

//
const init = async () => {
  getDictData('currency')
  setTabsData()
  getList()
}
</script>

<style scoped lang="scss">
.Evaluate {
  .el-button {
    min-width: 140px;
  }
  .body {
    padding: 30px 0 70px;
    background: #f5f5f5;
    margin-bottom: -76px;

    .main {
      background: #fff;
      padding: 25px 35px;
      .title {
        border-bottom: 2px solid #212121;
        padding-bottom: 20px;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 20px;
        color: var(--mainColor);
      }
      .search {
        margin-top: 25px;
        .item {
          width: 200px;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
